<template>
  <div>
    <!-- 轮播图 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list.slice(0,4)" :key="item.id">
        <img :src="item.picUrl" alt class="imgs">
      </mt-swipe-item>
    </mt-swipe>
    <!-- 中部6表格 -->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
            <img src="../assets/01.png" alt class="img66">
            <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/photolist">
            <img src="../assets/02.png" alt class="img66">
            <div class="mui-media-body">图片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="home/shoplist">
            <img src="../assets/03.png" alt class="img66">
            <div class="mui-media-body">商品购买</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../assets/04.png" alt class="img66">
            <div class="mui-media-body">意见反馈</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../assets/05.png" alt class="img66">
            <div class="mui-media-body">视频专区</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <img src="../assets/06.png" alt class="img66">
            <div class="mui-media-body">关于我们</div>
          </a>
        </li>
      </ul>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->

    <!--  -->
    <!--  -->
    <!--  -->
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getimgs();
  },
  methods: {
    getimgs() {
      var key = "0e1c9fd35d6ebfd6cf0204a3f45c52ca";
      var num = 10;
      this.$http
        .get(
          "http://api.tianapi.com/apple/?key=0e1c9fd35d6ebfd6cf0204a3f45c52ca&num=10"
        )
        .then(result => {
          var result = result.body;
          if (result) {
            this.list = result.newslist;
          } else {
            Toast("加载失败");
          }
        });
    }
  }
};
</script>
<style scoped>
/* 给轮播高度 */
.mint-swipe {
  height: 300px;
}
.imgs {
  height: 300px;
  width: 376px;
}

/*中部内容 背景和边框为白色和空 */
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: none;
}
.mui-grid-view.mui-grid-9 {
  background: #ffffff;
  border: none;
}
.img66 {
  width: 60px;
  height: 60px;
}
</style>